import { useEffect, useState } from 'react'
import axios from './api/axios'
import './App.css'
import { Image, Tabs } from 'antd';
import type { TabsProps } from 'antd';
//引入组件库 tab
import {
  MessageOutlined,
  HeartOutlined,
  LikeOutlined,
  TeamOutlined,
  UserOutlined,
} from '@ant-design/icons';

function App() {
  const [list, setList] = useState([])
  const getlist = async () => {
    const res = await axios.get('/mock/tab')
    console.log(res);
    const { data } = res.data
    console.log(data);
    setList(data)

  }
  useEffect(() => {
    getlist()
  }, [])

  const onChange = (key: string) => {
    console.log(key);
  };
  return (
    <div className='tabitem'>
      {/* tab高亮切换 */}
      <Tabs defaultActiveKey="1" onChange={onChange} >
        {/* 渲染列表内容 */}
        {
          list.length > 0 && list.map((item, index) => (
            <Tabs.TabPane tab={item.label} key={index}>
              {
                item.children.map((it, ind) => (
                    <div>
                      {/* 颜色的改变 */}
                    <span>{ind < 3 ? ind + 1 : ''}</span>
                    {it.word}
                    <p style={{fontSize:14,color:'#ccc'}}>
                      {it.nr}
                    </p>
                    <p >
                     评论：<MessageOutlined style={{color:"#ccc"}}/>关注：<HeartOutlined style={{color:"#ccc"}}/>点赞 ：<LikeOutlined style={{color:"#ccc"}}/>
                    </p>
                    <p  style={{marginLeft:'300px'}}>
                      <Image width={80} height={80} src='https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'>
                    </Image>
                    </p>
                    
                  </div> 
                )
                )
              }

            </Tabs.TabPane>
          ))
        }

      </Tabs>
    </div>
  )
}

export default App
